<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐购试做</title>
    <!-- 1. 引入插件样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/book.css">
    <!-- 1. 引入插件样式 -->

    <style>
    </style>
</head>

<body>
    <!--开始排版-->
    <!--顶部通栏-->
    <header class="topl">
        <div class="contents top1">
            <a href="index.html" class="wz">legochina.cn</a>
            <p>欢迎光临
                <a href="index.html">乐购</a>，请
                <a href="login.html">登录</a>
                <span>\</span>
                <a href="post.html" id="post">注册</a>
            </p>
        </div>
        <!--顶部导航栏-->
    </header>
    <div class="contents topnav cf">
        <form class="search" action="###" method="get">
            <input type="text" name="wd" placeholder="创意文具" />
            <button type="button" value="">
                <img src="images/seach01.jpg">
            </button>
        </form>
        <img src="images/logo.jpg" class="logo">
        <p class="cf">
            <a href="cart.html" id="cart">
                <img src="images/cart.png">购物车
                <span></span>
            </a>
            <a href="order.html" id="order">我的订单
                <span></span>
            </a>
        </p>
        <!--顶部主导航栏-->
        <ul class="mainnav">
            <li>
                <a href="books1.html">图书</a>
            </li>
            <li>
                <a href="###">电子书</a>
            </li>
            <li>
                <a href="###">原创文学</a>
            </li>
            <li>
                <a href="###">服装</a>
            </li>
            <li>
                <a href="###">户外运动</a>
            </li>
            <li>
                <a href="###">孕婴童</a>
            </li>
            <li>
                <a href="###">家居</a>
            </li>
            <li>
                <a href="###">创意文具</a>
            </li>
            <li>
                <a href="###">地方特产</a>
            </li>
            <li>
                <a href="###">海外购</a>
            </li>
            <li>
                <a href="###">电器城</a>
            </li>
        </ul>

    </div>
    <!--顶部下面的商品细节结构-->
<div class="books1 mt14">
<section class="contents">
        <p>
                <a class="cf666 fs22">
                        <span>图书</span>
                    </a>
                <a class="cf666">
                    <span>&nbsp;&nbsp;> 小说 </span>
                </a>
                <a class="cf666">
                    <span>&nbsp;&nbsp;> 情感/家庭/婚姻</span>
                </a>
                <a class="cf666">
                    <span>&nbsp;&nbsp;>  博集天卷</span>
                </a>
                <a class="cf666">
                    <span>&nbsp;&nbsp;> 她和他</span>
                </a>
            </p>
    <div class="bookshow cf">
        <div class="leftbook cf">
            <div class="magnifier" id="magnifier1">
                <div class="magnifier-container">
                    <div class="images-cover"></div>
                    <!--当前图片显示容器-->
                    <div class="move-view"></div>
                    <!--跟随鼠标移动的盒子-->
                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="images/books005.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="images/books001.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="images/books006.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="images/books007.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="images/books008.jpg" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
                <!--经过放大的图片显示容器-->
                <p>商品编号：11950959</p>
            </div>
           
        </div>
        <div class="rightbook">
            <h2>她和他</h2>
            <p>《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
            <p>[法] 马克·李维 著；杨亦雨 译</p>
            <div class=" rbookmsg">
                <p class="fl lh30">乐 购 价：<span>￥26.20</span> [6.9折] [定价：￥38.00] (降价通知) 
                    <br><br> 促销信息：<span class="cf60">满减 每满150.00元，可减50.00元现金 </span>  详情 >> 
                    <br><br> 领 券：<img src="images/books009.jpg"></p>
                <p class="fr lefeb cf">累计评价<br><span class="cf60">99999</span></p>
               
            </div>
            <p><a href="###"><img src="images/books010.jpg"></a></p>
        </div>
    </div>
</section>
</div>


    <!--顶部下面的人气单品-->
    <div class="contents likes">
        <h2>
            <p>人气单品</p>
        </h2>
        <ul>
            <li>
                <a href="###">
                    <img src="images/likes002.jpg">
                    <p>
                        <img src="images/recommend02.jpg">
                    </p>

                    <p>&nbsp;白夜行&emsp;东野上吾</p>
                    <p>
                        <img src="images/likes003.jpg">
                    </p>
                    <span>&nbsp;&#165;&nbsp;:998</span>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="images/likes002.jpg">
                    <p>
                        <img src="images/recommend02.jpg">
                    </p>

                    <p>&nbsp;白夜行&emsp;东野上吾</p>
                    <p>
                        <img src="images/likes003.jpg">
                    </p>
                    <span>&nbsp;&#165;&nbsp;:998</span>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="images/likes002.jpg">
                    <p>
                        <img src="images/recommend02.jpg">
                    </p>

                    <p>&nbsp;白夜行&emsp;东野上吾</p>
                    <p>
                        <img src="images/likes003.jpg">
                    </p>
                    <span>&nbsp;&#165;&nbsp;:998</span>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="images/likes002.jpg">
                    <p>
                        <img src="images/recommend02.jpg">
                    </p>

                    <p>&nbsp;白夜行&emsp;东野上吾</p>
                    <p>
                        <img src="images/likes003.jpg">
                    </p>
                    <span>&nbsp;&#165;&nbsp;:998</span>
                </a>
            </li>
            <li>
                <a href="###">
                    <img src="images/likes002.jpg">
                    <p>
                        <img src="images/recommend02.jpg">
                    </p>

                    <p>&nbsp;白夜行&emsp;东野上吾</p>
                    <p>
                        <img src="images/likes003.jpg">
                    </p>
                    <span>&nbsp;&#165;&nbsp;:998</span>
                </a>
            </li>
        </ul>

    </div>
    <!-- 轮播图下面的今日推荐 -->
    <div class="contents cf">
        <div class="contents mainset cf">
            <div class="leftasid fl cf">
                <p class="pccc">
                    <span>看了又看</span>
                </p>
                <ul class="cf">
                    <li>
                        <a href="###">
                            <img src="images/books002.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <img src="images/books002.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <img src="images/books002.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <img src="images/books002.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <img src="images/books002.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <img src="images/books002.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <img src="images/books002.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <img src="images/books002.jpg">
                        </a>
                    </li>
                </ul>
            </div>


            <!-- 主要内容2生成 -->
            <div class="rightasid cf">
                <ul class="cf">
                    <li class="fl"><a href="books1.html">商品介绍</a></li>
                    <li class="fl f60">评价（9999）</li>
                </ul>
                <div>
                    <img src="images/books003.jpg">
                    <p>
                        <a class="cf666">
                            <span>&nbsp;&nbsp;全部评价（9999）</span>
                        </a>
                        <a class="cf666">
                            <span>&nbsp;&nbsp;好评（888）</span>
                        </a>
                        <a class="cf666">
                            <span>&nbsp;&nbsp;中评（888）</span>
                        </a>
                        <a class="cf666">
                            <span>&nbsp;&nbsp;差评（888）</span>
                        </a>
                    </p>
                </div>

                <ul class="cf msg">
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                    <li>
                        <div class="lfsid fl">
                            <img src="images/books004.jpg">
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;下单后5天评论</p>
                            <p class="cfa6a6a6">&nbsp;&nbsp;&nbsp;2016-08-11</p>
                        </div>
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                            键是价格真给力
                            <div class="rfsid fr">
                                <p><img src="images/member001.jpg"><span class="cf666">洲袋子</span></p>
                                <p><span class="cf4b212">金牌会员</span></p>
                                <p class="cf808080">来自iPhone客户端</p>
                            </div>
                    </li>
                </ul>
                <div class="fr tiaozhuan">
                    <p><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>......</a><a>下一页</a></p>
                </div>


            </div>
        </div>

    </div>
    <!-- 推荐下面的图书 -->

    <div class="contents banner4">

        <a href="##">
            <img src="images/banner001.jpg">
        </a>

    </div>
    <!-- 推广下面的底部广告 -->
    <div class="banner2">
        <div class="contents banner3">
            <ul>
                <li>
                    <img src="images/ba01.png">
                </li>
                <li>
                    <img src="images/ba02.png">
                </li>
                <li>
                    <img src="images/ba03.png">
                </li>
                <li>
                    <img src="images/ba04.png">
                </li>
            </ul>
        </div>
    </div>
    <!-- 推广下面的底部广告 -->
    <div class="contents bannerlast cf">
        <ul>
            <li>
                <h4>购物指南</h4>
                <p>
                    <a href="###">购物流程</a>
                </p>
                <p>
                    <a href="###">发票制度</a>
                </p>
                <p>
                    <a href="###">账户管理</a>
                </p>
                <p>
                    <a href="###">会员优惠</a>
                </p>
            </li>
            <li>
                <h4>支付方式</h4>
                <p>
                    <a href="###">货到付款</a>
                </p>
                <p>
                    <a href="###">网上支付</a>
                </p>
                <p>
                    <a href="###">礼品卡支付</a>
                </p>
                <p>
                    <a href="###">银行转账</a>
                </p>
            </li>
            <li>
                <h4>订单服务</h4>
                <p>
                    <a href="###">订单配送查询</a>
                </p>
                <p>
                    <a href="###">订单状态说明</a>
                </p>
                <p>
                    <a href="###">自助取消订单</a>
                </p>
                <p>
                    <a href="###">自助修改订单</a>
                </p>
            </li>
            <li>
                <h4>退换货服务</h4>
                <p>
                    <a href="###">退换货政策</a>
                </p>
                <p>
                    <a href="###">自助申请退换货</a>
                </p>
                <p>
                    <a href="###">退换货进度查询</a>
                </p>
                <p>
                    <a href="###">退款方式和时间</a>
                </p>
            </li>
            <li>
                <h4>商家服务</h4>
                <p>
                    <a href="###">商家中心</a>
                </p>
                <p>
                    <a href="###">运营服务中心</a>
                </p>
                <p>
                    <a href="###">加入尾品汇</a>
                </p>
            </li>
            <li>
                <img src="images/d01.jpg">
            </li>


        </ul>
    </div>
    <!-- 页面的底部页脚 -->
    <div class="contents lfot">
        <p class="lik">
            <a href="###" class="lf1">公司简介</a>
            <a href="###">Investor Relations</a>
            <a href="###">网址联盟</a>
            <a href="###">乐购招商</a>
            <a href="###">机构销售</a>
            <a href="###">手机乐购</a>
            <a href="###">官方Blog</a>
            <a href="###">热词搜索</a>
        </p>
        <p>Copyright &copy; 乐购网 2014-2016, All rights reserved </p>
    </div>
    <!-- 页面的左边导航 -->



    <div>

    </div>



    <!-- 1. 引入jQuery -->
    <script src="./lib/jquery.min.js"></script>

    <!-- 2. 引入轮播插件 -->
    
    <!-- 2. 引入轮播插件 -->


    <!-- 4. 引入当前页面js文件 -->
    <script src="./js/books.js"></script>
    <script>


        /*
        var ths=document.querySelectorAll(".theader li");
        var ds=document.querySelectorAll(".con div");
        let lastIndex = 0;
   for(let i=0;i<ths.length;i++){
       
    ths[i].addEventListener("mouseenter",function(){

       ths[lastIndex].classList.remove("d1");  
       this.classList.add("d1")  
       
       ds[lastIndex].classList.remove("c1");
       ds[i].classList.add("c1");
       //重置上一个li标签的索引为当前li标签的索引
       lastIndex = i;   

       })
   }
        
        
        */
    </script>
</body>

</html>